<template>
  <div class="wrapper">
    <van-checkbox-group v-model="result">
      <van-cell-group>
        <van-cell v-for="(item, index) in lists"
                  clickable
                  :key="item.id"
                  @click="toggle(index)"
                  class="cell">
          <van-checkbox :name="index"
                        ref="checkboxes"
                        v-show="compile" />
          <div>
            <slot :shopInfo="item"></slot>
          </div>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>
  </div>
</template>

<script>
export default {
  name: 'CommonCheckBox',
  props: {
    lists: {
      type: Array
    },
    compile: {
      type: Boolean
    }
  },
  data () {
    return {
      result: []
    }
  },
  methods: {
    toggle (index) {
      if (!this.compile) {
        return
      }
      this.$refs.checkboxes[index].toggle()
      this.$emit('delete', this.result)
    }
  },
  watch: {
    compile (flag) {
      if (!flag) {
        this.result = []
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper >>> .van-checkbox
  width 50px
  height 50px

.wrapper >>> .van-checkbox__icon--checked .van-icon
  border-color $navColor
  background-color $navColor

.wrapper >>> [class*=van-hairline]:after
  border-top none

.wrapper >>> .van-checkbox__icon, .van-checkbox__label
  width 100%
  height 50px
  line-height 50px
  display flex

  i
    width 30px
    height 30px
    font-size 30px

.wrapper>>>.van-icon:before
  position absolute
  top 50%
  left 50%
  transform translate(-50%, -50%)

.wrapper >>> .van-cell__value--alone
  display flex
  align-items center

.wrapper
  position absolute
  width 100%
  height 100%

  .cell
    display flex
</style>
